<!--
 * @Description: 招聘-简历
 * @Author: rcc
 * @Date: 2024-08-08 11:40:04
 * @FilePath: /rc-recruitment/pages/tab-page/hiring-resume/hiring-resume.vue
-->

<template>
	<view class="page">
		<up-navbar
			title="收到的简历投递"
			placeholder
			:titleStyle="titleStyle"
			bgColor="#1269FF"
		>
			<template #left>
				<view class="flex"></view>
			</template>
		</up-navbar>

		<up-sticky bgColor="#fff">
			<up-tabs
				:list="tabs"
				:scrollable="false"
				:current="active"
				:activeStyle="activeStyle"
				:inactiveStyle="inactiveStyle"
				lineColor="#3F77FB"
				@change="handleChange"
			></up-tabs>
		</up-sticky>

		<view class="m-t40 p-h24">
			<view
				class="card flex-d-lc"
				v-for="(item, index) in list"
				:key="index"
				@click="goto"
				:data-url="`/pages/office/resume/resume?id=${item.id}&user_id=${item.user_id}`"
			>
				<view class="relative flex-r w p-v10">
					<view class="tag">新</view>
					<text class="text-400-326">{{ item.resume_time }}</text>
				</view>

				<view class="flex w p-b20 border-b4">
					<image class="cover" :src="item.avatar" mode="aspectFill"></image>

					<view class="flex-1 flex-d-lc m-l20">
						<text class="text-700-130"
							>{{ item.nickname }} | {{ item.gender == 1 ? "男" : "女" }} |
							{{ item.age }}岁</text
						>
						<text class="m-t10 text-400-326"
							>{{ item.school_name }} | {{ item.education }} |
							{{ item.speciality }}
						</text>
					</view>
				</view>

				<view class="flex w h-88">
					<text class="text-400-326">投递了</text>
					<text class="flex-1 m-l10 text-700-526">{{ item.title }}</text>
					<text class="text-400-326">
						{{ item.area }} | {{ item.education }} |
						{{ getWorkTimesLabel(item.work) }}工作经验 |
						{{ getNature(item.xingzhi) }}
					</text>
				</view>
			</view>
			<up-empty text="暂无数据" mode="list" v-if="!list.length"></up-empty>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { useNavigator } from "@/hooks/use-navigator";
import { useCommonStore } from "@/stores/user";
const { getWorkTimesLabel } = useCommonStore();
const { goto } = useNavigator();
const list: any = ref([]);
const active: number = ref(0);
//切换
function handleChange(e) {
	active.value = e.index;
	getResumeList();
}
//获取列表
async function getResumeList() {
	const res = await uni.$u.get("/resume/lst", { type: active.value });
	list.value = res.data;
}
const getNature = (type: number) => {
	const obj = {
		1: "全职",
		2: "兼职",
		3: "实习",
	};

	return obj[type as keyof typeof obj] ?? "";
};

const titleStyle = {
	color: "#fff",
	"font-size": "34rpx",
	"font-weight": "bold",
};

const activeStyle = {
	color: "#3F77FB",
	"font-size": "28rpx",
	"font-weight": "bold",
};

const inactiveStyle = {
	color: "#666666",
	"font-size": "28rpx",
	"font-weight": "bold",
};

const tabs = reactive([
	{ name: "未处理" },
	{ name: "面试" },
	{ name: "不合适" },
]);
getResumeList();
</script>

<style lang="scss" scoped>
.page {
	width: 100%;
	min-height: 100%;
	padding-bottom: 20rpx;
	// #ifdef H5
	padding-bottom: 100rpx;
	// #endif
	background-color: $page-color-4;
}

.card {
	margin-bottom: 20rpx;
	padding: 0 20rpx;
	border-radius: 10rpx;
	background-color: $bg-color-1;

	.tag {
		position: absolute;
		top: 0;
		left: -20rpx;
		width: 44rpx;
		height: 32rpx;
		color: #e51c23;
		font-size: 24rpx;
		text-align: center;
		line-height: 32rpx;
		background-color: #ffd9da;
		border-radius: 10rpx 0rpx 10rpx 0rpx;
	}

	.cover {
		width: 102rpx;
		height: 102rpx;
		border-radius: 10rpx;
		border: 1rpx solid $border-color-4;
	}
}
</style>
